{% extends "static/view/template.html" %}
{% block body %}

<style>

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

/* CSS REQUIRED */
.state-icon {
    left: -5px;
}
.list-group-item-primary {
    color: rgb(255, 255, 255);
    background-color: rgb(66, 139, 202);
}

/* DEMO ONLY - REMOVES UNWANTED MARGIN */
.well .list-group {
    margin-bottom: 0px;
}

td { max-width:300px; word-wrap:break-word; }

a:hover {
    background-color: #80ff80;
    cursor: pointer;
}
.glyphicon:hover {
    background-color: #ffff00;
    cursor: pointer;
}

.list-group-item-clickable:hover {
    cursor: pointer;
}
</style>


<!-- Main panel -->
<div id="app">
    <div class="container">
        <div class="page-header">
        </div>

        <div class="page-header">
            <h1> <font color= #333333><center>Performance Counter Analyzer</center></font>
            </h1>
        </div>
    </div>

    <div class="container" style="margin-top:20px;">
        <div class="row">
            <div class="col-xs-9"></div>
            <div class="col-xs-1">
                <button class="btn btn-warning" onclick="window.open('analyzer.html');">New View</button>
            </div>
            <div class="col-xs-1">
                <button class="btn btn-success" @click="loadView()">Load View</button>
            </div>
            <div class="col-xs-1">
                <button class="btn btn-info" data-toggle="modal" data-target="#saveview" >Save View</button>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6">
                <h3 class="text-center">Counter List</h3>
                <div class="well" style="max-height: 500px;overflow: auto;">
                    <ul class="list-group counterListAll" id="counterListAll">
                        <li class="list-group-item" data-toggle="modal" data-target="#addcounter">..<span class="glyphicon glyphicon-plus pull-right"></span></li>
                        <li class="list-group-item" v-for="counter in counterPool">{{counter.label}}<span class="glyphicon glyphicon-remove pull-right" aria-hidden="true" @click="removeCounterFromPool(counter)"></span></li>
                    </ul>
                </div>
            </div>
            <div class="col-xs-6">
                <h3 class="text-center">Graph Type</h3>
                <div class="well" style="max-height: 300px;overflow: auto;">
                    <ul class="list-group">
                      <li class="list-group-item"><input type="radio" name="graphtype" value="value" v-model="graphtype">&nbsp; Realtime value</li>
                      <li class="list-group-item"><input type="radio" name="graphtype" value="sample" v-model="graphtype">&nbsp; Realtime sample</li>
                      <li class="list-group-item"><input type="radio" name="graphtype" value="bar" v-model="graphtype">&nbsp; Bar</li>
                    </ul>
                </div>
                <h3 class="text-center">Update Interval</h3>
                <div class="well" style="max-height: 300px;overflow: auto;">
                    <ul class="list-group ">
                      <li class="list-group-item"><input type="radio" name="interval" value="1" v-model="interval">&nbsp; 1 seconds</li>
                      <li class="list-group-item"><input type="radio" name="interval" value="5" v-model="interval">&nbsp; 5 seconds</li>
                      <li class="list-group-item"><input type="radio" name="interval" value="10" v-model="interval">&nbsp; 10 seconds</li>
                      <li class="list-group-item"><input type="text" name="interval-num" v-model="interval">&nbsp;  seconds</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2"></div>
            <button class="btn btn-primary col-xs-8" @click="runView">Run performance view</button>
            <div class="col-xs-2"></div>
        </div>
    </div>

    <!-- ViewList Modal -->
    <div id="viewlist" class="modal modal-wide fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">View List</h4>
          </div>
          <div class="modal-body">
            <table class="table table-striped" id="viewList">
            <thead>
            <tr>
                <th>Name</th>
                <th>Author</th>
                <th>Description</th>
                <th>Run</th>
                <th>Load</th>
                <th>Delete</th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="view in viewList">
                    <td>{{view.name}}</td>
                    <td>{{view.author}}</td>
                    <td>{{view.description}}</td>
                    <td><span class="glyphicon glyphicon-play" @click="playView(view)"></span></td>
                    <td><span class="glyphicon glyphicon-import" @click="importView(view)"></span></td>
                    <td><span class="glyphicon glyphicon-remove" @click="removeView(view)"></span></td>
                </tr>
            </tbody>
            </table>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>

    <!-- Add Counter Modal -->
    <div id="addcounter" class="modal modal-wide fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Select counter</h4>
          </div>
          <div class="modal-body">

            <div class="row">
                <div class="col-xs-3">
                    <h4 class="text-center">Machines</h3>
                    <div class="well" style="max-height: 300px;overflow: auto;">
                        <ul class="list-group">
                            <li class="list-group-item">
                                <input class="new-machine" style="width: 100%;"
                                    autofocus autocomplete="off"
                                    placeholder="(Type MachineName:PortNum)"
                                    v-model="newMachine"
                                    @keyup.enter="addMachine">
                            </li>
                            <li class="list-group-item list-group-item-clickable" v-for="machine in machineList" @click="Machine2App(machine)" :class="[chosenMachine==machine ? 'list-group-item-primary' : '']">
                                {{machine}}
                                <span class="glyphicon glyphicon-remove pull-right" aria-hidden="true" @click="removeMachine(machine)"></span>
                                </li>
                        </ul>
                    </div>
                </div>
                <div class="col-xs-2">
                    <h4 class="text-center">Apps</h3>
                    <div class="well" style="max-height: 300px;overflow: auto;">
                        <ul class="list-group">
                            <li class="list-group-item list-group-item-clickable" v-for="app in appList" @click="App2Section(app)" :class="[chosenApp==app ? 'list-group-item-primary' : '']">{{app}}</li>
                        </ul>
                    </div>
                </div>
                <div class="col-xs-2">
                    <h4 class="text-center">Sections</h3>
                    <div class="well" style="max-height: 300px;overflow: auto;">
                        <ul class="list-group">
                            <li class="list-group-item list-group-item-clickable" v-for="section in sectionList" @click="Section2Counter(section)" :class="[chosenSection==section ? 'list-group-item-primary' : '']">{{section}}</li>
                        </ul>
                    </div>
                </div>
                <div class="col-xs-5">
                    <h4 class="text-center">Counters</h3>
                    <div class="well" style="max-height: 300px;overflow: auto;" id="counterwell">
                        <ul class="list-group" id="counterList">
                            <li class="list-group-item list-group-item-clickable" v-for="counter in counterList | filterBy searchedCounter" @click="Counter2Queue(counter)" :class="[chosenCounter==counter ? 'list-group-item-primary' : '']">{{counter}}</li>
                        </ul>
                    </div>
                    <label for="searchcounter">FilterBy: &nbsp</label>
                    <input type="text" id="searchcounter" v-model="searchedCounter">
                </div>
                <div class="col-xs-4">
                    
                </div>
            </div>
            <div class="row">
            </div>
            <div class="row">
                <h4 class="text-center">Selected counters</h3>
                    <div class="well" style="max-height: 300px;overflow: auto;">
                    <ul class="list-group remove-list-box">
                        <li class="list-group-item" v-for="counter in counterQueue">{{counter.label}}<span class="glyphicon glyphicon-remove pull-right" aria-hidden="true" @click="removeCounterFromQueue(counter)"></span></li>
                    </ul>
                    </div>
            </div>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" @click="Queue2Pool">Add to pool</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Save View Modal -->
    <div id="saveview" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Save View</h4>
          </div>
          <div class="modal-body">
            <div class="row">
                <div class="col-xs-4">
                    <label for="viewname" >View Name</label>
                    <input id="viewname" v-model="viewName">
                </div>
                <div class="col-xs-4">
                </div>
                <div class="col-xs-4">
                    <label for="author" >Author</label>
                    <input id="author" v-model="author">
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <label for="description" >Descrption</label>
                    <textarea class="form-control" rows="5" id="description" v-model="description"></textarea>
                </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" data-toggle="modal" data-target="#infomodal" @click="saveView">Save</button>
            <button type="button" class="btn btn-default" data-dismiss="modal" >Cancel</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Info Modal -->
    <div id="infomodal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Info</h4>
          </div>
          <div class="modal-body">
              {{info}}
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
</div>

<script src="js/vue.js"></script>
<script src="js/analyzer.js"></script>

{% endblock %}
